<template>
  <div>
    
    <el-row>
      <el-col :span="6">
        <el-card>
          <Detail number="￥16892312" title="总销售额">
            <template slot="charts">
              <span>周同比 &nbsp; 56.67% <svg t="1658370920943" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5643" width="16" height="16"><path d="M698.7 480.9v429.5c0 54.8-44.5 99.3-99.3 99.3H434c-54.8 0-99.3-44.5-99.3-99.3V480.9H70l446.9-463 446.9 463H698.7z m0 0" fill="#1afa29" p-id="5644"></path></svg></span>
              &nbsp;&nbsp;<span>日同比&nbsp;19.88% <svg t="1658371090961" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9921" width="16" height="16"><path d="M335 546.6V117.1c0-54.8 44.5-99.3 99.3-99.3h165.4c54.8 0 99.3 44.5 99.3 99.3v429.5h264.7l-446.9 463L70 546.6h265z m0 0" fill="#d81e06" p-id="9922"></path></svg></span>
            </template>
            <template slot="footer">
              <span>日销售额 890200 </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <Detail title="访问量" number="1121288460">
            <template slot="charts">
              <LineChart></LineChart>
            </template>
             <template slot="footer">
              <span>日访问量 96897328</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
       <el-card>
          <Detail title="支付笔数" number="128843460">
            <template slot="charts">
                <BarChart></BarChart>
            </template>
             <template slot="footer">
              <span>转化率 68%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <Detail title="运营活动效果" number="78%">
            <template slot="charts">
              <ProcessChart></ProcessChart>
            </template>
             <template slot="footer">
              <span>周同比 &nbsp; 56.67% <svg t="1658370920943" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5643" width="16" height="16"><path d="M698.7 480.9v429.5c0 54.8-44.5 99.3-99.3 99.3H434c-54.8 0-99.3-44.5-99.3-99.3V480.9H70l446.9-463 446.9 463H698.7z m0 0" fill="#1afa29" p-id="5644"></path></svg></span>
              &nbsp;&nbsp;<span>日同比&nbsp;19.88% <svg t="1658371090961" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9921" width="16" height="16"><path d="M335 546.6V117.1c0-54.8 44.5-99.3 99.3-99.3h165.4c54.8 0 99.3 44.5 99.3 99.3v429.5h264.7l-446.9 463L70 546.6h265z m0 0" fill="#d81e06" p-id="9922"></path></svg></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "@/views/dashboard/Card/Detail";
import LineChart from "./LineChart"
import BarChart from './Barchart'
import ProcessChart from './ProcessChart'
export default {
  name: "Card",
  components: { Detail,LineChart,BarChart,ProcessChart },
};
</script>

<style></style>
